<template>
  <div class="message-list">
    <ol class="list-wrapper">
      <li class="list-item" v-for="(topic, i) of topic.list" :key="i">
        <div class="header">{{ topic.subject }}</div>
        <div class="footer">
          <span>{{ topic.day }}</span>
          <span>{{ topic.weekDay }}</span>
          <span>{{ topic.time }}</span>
        </div>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topic: {
        list: [{
          id: 1,
          subject: '近日部分全国人大代表、政协委员视察湖南法院',
          day: '2019-06-03',
          weekDay: '星期一',
          time: '14:30',
          name: '张宁'
        }, {
          id: 2,
          subject: '近日部分全国人大代表、政协委员视察湖南法院',
          day: '2019-06-03',
          weekDay: '星期一',
          time: '14:30',
          name: '张宁'
        }, {
          id: 3,
          subject: '近日部分全国人大代表、政协委员视察湖南法院',
          day: '2019-06-03',
          weekDay: '星期一',
          time: '14:30',
          name: '张宁'
        }, {
          id: 4,
          subject: '近日部分全国人大代表、政协委员视察湖南法院',
          day: '2019-06-03',
          weekDay: '星期一',
          time: '14:30',
          name: '张宁'
        }, {
          id: 5,
          subject: '近日部分全国人大代表、政协委员视察湖南法院',
          day: '2019-06-03',
          weekDay: '星期一',
          time: '14:30',
          name: '张宁'
        }]
      }
    };
  }
};
</script>

<style lang="less" scoped>
.message-list {
  background: #f5f5f5;
  padding: 20px;
  .list-wrapper {
    .list-item {
      background-color: #ffffff;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      padding: 26px;
      &:not(:first-child) {
        margin-top: 20px;
      }
      .header {
        font-size: 36px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40px;
        color: #333333;
      }
      .footer {
        margin-top: 28px;
        font-size: 28px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 46px;
        letter-spacing: 0px;
        color: #888888;
        > span:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
